Tailwind CSS
https://gyazo.com/d779a2f7951457023e090625aa510cc3
てーるうぃんど
tailwindは「追い風」という意味
最近出たのかと思いきや2017年ごろからあるっぽい
サイズの最適化にも注力しており、配布される最終的なCSSはかなり小さくなる ref 支援
参考
Tailwind CSSの開発者がどういう段階を踏んでUtility Firstな設計に到達したかの説明
HTML→CSSという依存関係や、「汎用的なCSS」を考えていくと今のTailwind CSSのようなものにならざるを得ない
tailwindに慣れていない状態だと
p-8とか適当に書いた後に、VSCode上でhoverして、「なるほど2remなんだな」というのを毎回確認しているが、
これってtailwindの思想と相反してるよね？
その数値が実際にはどういう数字になるのか、というのを意識せずに使えるのが最も理想な状態なのではないか
そうでもないのかな
元々選択肢が
0~1000(仮)のように連続した数値であったのを
0.25rem, 0.5rem, 1rem,..のように飛び飛びにして、その値しか使えないように制限した、というのが大きい？
そしてそれに対して前から順に0, 1, 2,...と振っていっただけ
こっちだけだとしたら、毎回hoverするのもあまり問題ではない気もする
が、アプローチとしてあまり正しくないと思う
0.25rem, 0.5rem,...というのと0, 1, 2, ..のが対応取れていない
ある特定の計算式を満たしているならまだしも
この辺どうやって運用してるんだろう
これはComponent自体を提供している
styleには関与していていない
styleはTailwindでやってねという立ち位置
これはTailwind CSSのutility classを提供している
hoverとか
utilityを学んでいく
https://www.youtube.com/watch?v=ih3WVQYKkuI
パフォーマンス
taliwindのサイズを限りなく小さくする
$ npx tailwindcss -o build.css --minify
筆者の考えでは、Tailwind CSSの採用を考慮に入れてよいのは次の2つの場合です。
デザインにこだわりがなく、最低限整っていればいい場合。
逆に、デザインシステムをしっかりと整備しそれからの逸脱を防ぎたい場合。
Tailwindのクラス名はやや短くしすぎで、いわゆる「SimpleではなくEasy」なものになってしまっている印象を受けます。
この辺と一緒に使うことが多いらしい
同じところが作ってる
tailwindがdefaultで用意したutility classに対するstyleは、
productで使っていないなら削除するので無駄がない
devtool
plugin
sample集
既存のTailwindのデザインを見ながらルールを調べていく感じがあってそうmrsekut.icon
sample集のリンクが欲しい
VSCode拡張がある
HSX上ではな動かなかったmrsekut.icon
設定すればいけるかも
疑似要素
核のだるいらしい